<template>
  <div>
    <Form ref="form" :model="form" :rules="formRules" style="max-width: 500px; margin: 40px auto 0;">
      <FormItem
        label="付款账户"
        prop="paymentUser">
        <Select
          v-model="form.paymentUser"
          placeholder="ant-design@alipay.com">
          <Option value="1">ant-design@alipay.com</Option>
        </Select>
      </FormItem>
      <FormItem
        prop="payType"
        label="收款账户">
        <Input>
        <Select slot="prepend" v-model="form.payType" style="width: 100px">
          <Option value="alipay">支付宝</Option>
          <Option value="wexinpay">微信</Option>
        </Select>
        </Input>
      </FormItem>
      <FormItem
        prop="name"
        label="收款人姓名"
      >
        <Input v-model="form.name"/>
      </FormItem>
      <FormItem
        prop="money"
        label="转账金额"
      >
        <Input v-model="form.money">
        <span slot="prepend">￥</span>
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="nextStep">下一步</Button>
      </FormItem>
    </Form>
    <Divider/>
    <div class="step-form-style-desc">
      <h3>说明</h3>
      <h4>转账到支付宝账户</h4>
      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
      <h4>转账到银行卡</h4>
      <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Step1',
  data () {
    return {
      form: {
        paymentUser: '',
        payType: 'alipay',
        name: '',
        money: '5000'
      },
      formRules: {
        paymentUser: [
          { required: true, message: '付款账户必须填写', trigger: 'blur' }
        ],
        payType: [
          { required: true, message: '收款账户必须填写', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '收款人名称必须核对', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '转账金额必须填写', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    nextStep () {
      // 先校验，通过表单校验后，才进入下一步
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('nextStep')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, .45);

    h3 {
      margin: 0 0 12px;
      color: rgba(0, 0, 0, .45);
      font-size: 16px;
      line-height: 32px;
    }

    h4 {
      margin: 0 0 4px;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }

    p {
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 22px;
    }
  }
</style>
